[ElementTiming] Cleanup window.location.href usage in tests This CL removes window.location.href usage in element-timing tests and uses window.location.origin instead, which makes the pathname computation cleaner. It also adds t.step_func where it is missing. Change-Id: Iabaac33eb65f9ed24f68e7fa583c8de05d1264c5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1872762 Reviewed-by: Tom McKee <tommckee@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#707954} 
diff --git a/element-timing/background-image-multiple-elements.html b/element-timing/background-image-multiple-elements.html index 084bb9c..44755d4 100644 --- a/element-timing/background-image-multiple-elements.html +++ b/element-timing/background-image-multiple-elements.html 
@@ -31,9 +31,7 @@  let observedDiv1 = false;  let observedDiv2Img = false;  let observedDiv2Txt = false; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png';  const observer = new PerformanceObserver(  t.step_func(function(entryList) {  entryList.getEntries().forEach(entry => { 
diff --git a/element-timing/background-image-stretched.html b/element-timing/background-image-stretched.html index 930b4ce..0cd5633 100644 --- a/element-timing/background-image-stretched.html +++ b/element-timing/background-image-stretched.html 
@@ -25,9 +25,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png';  checkElement(entry, pathname, 'my_div', 'target', beforeRender,  document.getElementById('target'));  // The background image extends to occupy to full size of the div. 
diff --git a/element-timing/buffer-before-onload.html b/element-timing/buffer-before-onload.html index 68eeeef..d675c75 100644 --- a/element-timing/buffer-before-onload.html +++ b/element-timing/buffer-before-onload.html 
@@ -25,19 +25,17 @@    // this PerformanceObserver should be notified about the previously  // buffered element entry - new PerformanceObserver(function (entryList, observer) { + new PerformanceObserver(t.step_func((entryList, observer) => {  assert_equals(entryList.getEntries().length, 1); - entryList.getEntries().forEach(function(entry) { + entryList.getEntries().forEach(entry => {  assert_equals(entry.entryType, "element"); - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square20.jpg'; + const pathname = window.location.origin + '/element-timing/resources/square20.jpg';  checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);  checkNaturalSize(entry, 20, 20);  observer.disconnect();  t.done();  }); - }).observe({ + })).observe({  type: "element",  buffered: true  }); 
diff --git a/element-timing/disconnect-image.html b/element-timing/disconnect-image.html index 82e7461..fa42397 100644 --- a/element-timing/disconnect-image.html +++ b/element-timing/disconnect-image.html 
@@ -16,9 +16,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png';  // This method will check that entry.element is |img|.  checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);   
diff --git a/element-timing/image-carousel.html b/element-timing/image-carousel.html index 39d9f01..dc5d8e8 100644 --- a/element-timing/image-carousel.html +++ b/element-timing/image-carousel.html 
@@ -32,12 +32,9 @@  const beforeRenderTimes = [];  let entry_count = 0;  const entry_count_per_element = [0, 0]; - const index = window.location.href.lastIndexOf('/'); - const pathname0 = window.location.href.substring(0, index) + - '/resources/circle.svg'; - const pathname1 = window.location.href.substring(0, index) + - '/resources/square100.png'; - const observer = new PerformanceObserver(list => { + const pathname0 = window.location.origin + '/element-timing/resources/circle.svg'; + const pathname1 = window.location.origin + '/element-timing/resources/square100.png'; + const observer = new PerformanceObserver(t.step_func(list => {  list.getEntries().forEach(entry => {  if (entry_count % 2 == 0) {  checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count], @@ -61,7 +58,7 @@  t.done();  }  }) - }); + }));  observer.observe({entryTypes: ['element']});  let slideIndex = 0;  showCarousel(); 
diff --git a/element-timing/image-clipped-svg.html b/element-timing/image-clipped-svg.html index 1e9971c..15c78a4 100644 --- a/element-timing/image-clipped-svg.html +++ b/element-timing/image-clipped-svg.html 
@@ -14,9 +14,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname = window.location.origin + '/element-timing/resources/circle.svg';  checkElement(entry, pathname, 'my_svg', 'SVG', beforeRender,  document.getElementById('SVG'));  // Image size is 200x200 but SVG size is 100x100 so it is clipped. 
diff --git a/element-timing/image-not-fully-visible.html b/element-timing/image-not-fully-visible.html index 105bb55..ece7770 100644 --- a/element-timing/image-not-fully-visible.html +++ b/element-timing/image-not-fully-visible.html 
@@ -21,9 +21,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square20.png'; + const pathname = window.location.origin + '/element-timing/resources/square20.png';  checkElement(entry, pathname, 'not_fully_visible', '', beforeRender, img);  // Image will not be fully visible. It should start from the top left part  // of the document, excluding the margin, and then overflow. 
diff --git a/element-timing/image-with-css-scale.html b/element-timing/image-with-css-scale.html index 5c15daa..2dbbc06 100644 --- a/element-timing/image-with-css-scale.html +++ b/element-timing/image-with-css-scale.html 
@@ -28,9 +28,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png';  checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender,  document.getElementById('rect_id'));  checkRect(entry, [0, 200, 25, 125]); 
diff --git a/element-timing/image-with-rotation.html b/element-timing/image-with-rotation.html index c545bec..fcffe4a 100644 --- a/element-timing/image-with-rotation.html +++ b/element-timing/image-with-rotation.html 
@@ -28,9 +28,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png';  checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender,  document.getElementById('rect_id'));  checkNaturalSize(entry, 100, 50); 
diff --git a/element-timing/images-repeated-resource.html b/element-timing/images-repeated-resource.html index a6ad7ac..e3fe9b9 100644 --- a/element-timing/images-repeated-resource.html +++ b/element-timing/images-repeated-resource.html 
@@ -19,9 +19,6 @@  let renderTime2;  let img;  let img2; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png';  async_test(function (t) {  if (!window.PerformanceElementTiming) {  assert_unreached("PerformanceElementTiming is not implemented"); @@ -30,6 +27,7 @@  t.step_func(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; + const pathname = window.location.origin + '/element-timing/resources/square100.png';  // Easier to check the |element| attribute here since element ID is the same for both images.  checkElement(entry, pathname, entry.identifier, 'image_id', beforeRender, null);  checkNaturalSize(entry, 100, 100); 
diff --git a/element-timing/multiple-background-images.html b/element-timing/multiple-background-images.html index 626287b..b29e66c 100644 --- a/element-timing/multiple-background-images.html +++ b/element-timing/multiple-background-images.html 
@@ -24,8 +24,7 @@  let numObservedElements = 0;  let observedCircle = false;  let observedSquare = false; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + '/resources/'; + const pathPrefix = window.location.origin + '/element-timing/resources/';  let div = document.getElementById('target');  const observer = new PerformanceObserver(  t.step_func(entryList => { @@ -33,13 +32,13 @@  numObservedElements++;  if (entry.url.endsWith('square100.png')) {  observedSquare = true; - checkElement(entry, pathname + 'square100.png', 'multi', 'target', beforeRender, div); + checkElement(entry, pathPrefix + 'square100.png', 'multi', 'target', beforeRender, div);  checkRect(entry, [0, 200, 0, 200]);  checkNaturalSize(entry, 100, 100);  }  else if (entry.url.endsWith('circle.svg')) {  observedCircle = true; - checkElement(entry, pathname + 'circle.svg', 'multi', 'target', beforeRender, div); + checkElement(entry, pathPrefix + 'circle.svg', 'multi', 'target', beforeRender, div);  checkRect(entry, [0, 200, 0, 200]);  checkNaturalSize(entry, 200, 200);  } 
diff --git a/element-timing/observe-background-image.html b/element-timing/observe-background-image.html index c642264..afc6b5b 100644 --- a/element-timing/observe-background-image.html +++ b/element-timing/observe-background-image.html 
@@ -25,9 +25,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png';  checkElement(entry, pathname, 'my_div', 'target', beforeRender,  document.getElementById('target'));  checkRect(entry, [0, 100, 0, 50]); 
diff --git a/element-timing/observe-elementtiming.html b/element-timing/observe-elementtiming.html index 0c67130..164cc4f 100644 --- a/element-timing/observe-elementtiming.html +++ b/element-timing/observe-elementtiming.html 
@@ -21,9 +21,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname = window.location.origin + '/element-timing/resources/square100.png';  checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);  // Assume viewport has size at least 100, so the element is fully visible.  checkRect(entry, [0, 100, 0, 100]); 
diff --git a/element-timing/observe-multiple-images.html b/element-timing/observe-multiple-images.html index 8a5fa0b..6b5c5d9 100644 --- a/element-timing/observe-multiple-images.html +++ b/element-timing/observe-multiple-images.html 
@@ -25,7 +25,6 @@  if (!window.PerformanceElementTiming) {  assert_unreached("PerformanceElementTiming is not implemented");  } - const index = window.location.href.lastIndexOf('/');  const observer = new PerformanceObserver(  t.step_func(function(entryList) {  entryList.getEntries().forEach( entry => { @@ -35,8 +34,7 @@  t.done();  }  image1Observed = 1; - const pathname1 = window.location.href.substring(0, index) + - '/resources/square100.png'; + const pathname1 = window.location.origin + '/element-timing/resources/square100.png';  // The images do not contain ID, so expect an empty ID.  checkElement(entry, pathname1, 'image1', 'img1', beforeRender,  document.getElementById('img1')); @@ -61,8 +59,7 @@  t.done();  }  image2Observed = 1; - const pathname2 = window.location.href.substring(0, index) + - '/resources/square20.png'; + const pathname2 = window.location.origin + '/element-timing/resources/square20.png';  checkElement(entry, pathname2, 'image2', 'img2', beforeRender,  document.getElementById('img2'));  // This image should be below image 1, and should respect the margin. @@ -75,8 +72,7 @@  t.done();  }  image3Observed = 1; - const pathname3 = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname3 = window.location.origin + '/element-timing/resources/circle.svg';  checkElement(entry, pathname3, 'image3', 'img3', beforeRender,  document.getElementById('img3'));  // This image is just to the right of image2. 
diff --git a/element-timing/observe-svg-image.html b/element-timing/observe-svg-image.html index 29fec39..8a0f61d 100644 --- a/element-timing/observe-svg-image.html +++ b/element-timing/observe-svg-image.html 
@@ -14,9 +14,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname = window.location.origin + '/element-timing/resources/circle.svg';  checkElement(entry, pathname, 'my_svg', 'svg_id', beforeRender,  document.getElementById('svg_id'));  // Assume viewport has size at least 200, so the element is fully visible. 
diff --git a/element-timing/observe-video-poster.html b/element-timing/observe-video-poster.html index 9f82478..a634837 100644 --- a/element-timing/observe-video-poster.html +++ b/element-timing/observe-video-poster.html 
@@ -14,9 +14,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + - '/resources/circle.svg'; + const pathname = window.location.origin + '/element-timing/resources/circle.svg';  checkElement(entry, pathname, 'my_poster', 'the_poster', beforeRender,  document.getElementById('the_poster'));  // Assume viewport has size at least 200, so the element is fully visible. 
diff --git a/element-timing/progressively-loaded-image.html b/element-timing/progressively-loaded-image.html index a55c589..f156e1a 100644 --- a/element-timing/progressively-loaded-image.html +++ b/element-timing/progressively-loaded-image.html 
@@ -23,9 +23,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - const pathname = window.location.href.substring(0, index) + '/' + - img_src; + const pathname = window.location.origin + '/element-timing/' + img_src;  // Since the image is only fully loaded after the sleep, the render timestamp  // must be greater than |beforeRender| + |sleep|.  checkElement(entry, pathname, 'my_image', '', beforeRender + sleep, img); 
diff --git a/element-timing/rectangular-image.html b/element-timing/rectangular-image.html index 0b44c4f..0c09911 100644 --- a/element-timing/rectangular-image.html +++ b/element-timing/rectangular-image.html 
@@ -21,10 +21,7 @@  t.step_func_done(function(entryList) {  assert_equals(entryList.getEntries().length, 1);  const entry = entryList.getEntries()[0]; - const index = window.location.href.lastIndexOf('/'); - // Subtracting 14 to remove 'element-timing'. - const pathname = window.location.href.substring(0, index - 14) + - 'images/black-rectangle.png'; + const pathname = window.location.origin + '/images/black-rectangle.png';  checkElement(entry, pathname, 'my_image', 'rectangle', beforeRender, img);  // Assume viewport has size at least 100, so the element is fully visible.  checkRect(entry, [20, 120, 20, 70]);